<template>
	<Layout style="background:#f0f2f5;">

		<Row>
			<Col span="18" offset="3">

				<div style="padding: 20px 0;">
					<Card style="background:#fff;">
						<Row>
							<Col span="12" style="text-align: left;">
								<Cascader :data="DateInit" transfer v-model="selectDate" :load-data="ttrees" :render-format="format" :clearable="false" change-on-select @on-change="changeDate" style="width: 200px; display: inline-block;"></Cascader>
								<Button type="text" :class="{ active: isActiveDate ==new Date().format('yyyy-MM-dd') }" @click="changeDate(new Date().format('yyyy-MM-dd'))">今日</Button>
								<Button type="text" :class="{ active: isActiveDate ==new Date().format('yyyy-MM') }" @click="changeDate(new Date().format('yyyy-MM'))">本月</Button>
								<Button type="text" :class="{ active: isActiveDate ==new Date().format('yyyy') }" @click="changeDate(new Date().format('yyyy'))">今年</Button>
							</Col>
							<Col span="12" style="text-align: right;">
								<Cascader :data="ensTreeData" transfer :clearable="false" change-on-select
                          @on-change="changeWorkSpace" style="width: 400px; display: inline-block;" v-model="spaceSelect"></Cascader>
							</Col>
						</Row>
					</Card>
				</div>

				<div style="padding-bottom: 20px;">
					<Row class-name="TopIndex_block">

						<Col span="6" class-name="TopIndex_block_item" v-for="(item, index) in SummaryList" :key="index">
							<Card :bordered="false" :class="{ active: cardActive == item.type,'Clickable': Clickable.indexOf(item.type) != -1}">
								<div @click="CoolingTypeClick(item.type)">
								<p>{{item.type}}</p>
								<h1>{{item.useNum}}<span>{{item.unit}}</span></h1>
								<Row class-name="TopIndex_block_item_row" v-if="item.lastPeriod">
									<Col span="12">
									环比&nbsp;<Icon type="md-arrow-dropup" size="24" color="#86d270" v-if="item.lastPeriod.indexOf('-')!=0" /><Icon type="md-arrow-dropdown" size="24" color="red" v-if="item.lastPeriod.indexOf('-')==0" />&nbsp;{{item.lastPeriod.substr(1)}}
									</Col>
									<Col span="12">
									KPI&nbsp;<Icon type="md-arrow-dropup" size="24" color="#86d270" v-if="item.kpi.indexOf('-')!=0" /><Icon type="md-arrow-dropdown" size="24" color="red" v-if="item.kpi.indexOf('-')==0" />&nbsp;{{item.kpi.substr(1)}}
									</Col>
								</Row>
								<img src="/static/img/u310.png" v-if="!item.lastPeriod" />
								</div>
							</Card>
						</Col>

					</Row>
				</div>

				<div style="padding-bottom: 20px;">
					<Row>
						<Col span="18">
							<Card :bordered="false">
								<p slot="title">冷量走势</p>
								<chart-line style="height: 288px;" :barObj="chartLineData" />
							</Card>
						</Col>

						<Col span="6">
							<Card :bordered="false">
								<p slot="title">子级占比/排名</p>
								<ranking-List :BasicData="BasicData"></ranking-List>
							</Card>
						</Col>
					</Row>
				</div>

				<div style="padding-bottom: 20px;">
					<Row>
						<Col span="12" style="padding-right: 10px;">
              <Card :bordered="false">
                <p slot="title">同类对比</p >
                <Table size="small" height="232" :columns="sameCompareTableConfig.sameCompareColumns" page-size-opts="[5, 10, 20, 30]" @on-sort-change="onSortChange" :data="sameCompareTableConfig.sameCompareData"></Table>
                <Page :total="sameCompareTableConfig.totals" size="small" :page-size="sameCompareTableConfig.sameCompare.size" @on-page-size-change="pageSizeChange"
                      @on-change="changePage" :page-size-opts="[5,10]" class-name="sameCompare_table" show-elevator show-sizer />
              </Card>
						</Col>
						<Col span="12" style="padding-left: 10px;">
							<Card :bordered="false">
								<p slot="title">类型占比/排名</p>
								<chart-pie style="height: 270px;" :value="typePercent"></chart-pie>
							</Card>
						</Col>
					</Row>
				</div>

				<div style="padding-bottom: 20px;">
					<Row>
						<Col span="18">
							<Card :bordered="false">
								<p slot="title">过往对比</p>
								<chart-bar style="height: 288px;" :barObj="barObj"/>
							</Card>
						</Col>
						<Col span="6">
							<Card :bordered="false">
								<p slot="title">过往排名</p>
								<ranking-List :BasicData="BasicData"></ranking-List>
							</Card>
						</Col>
					</Row>
				</div>

			</Col>
		</Row>
	</Layout>
</template>

<script>
	import { ChartPie, ChartBar, ChartLine } from '@/components/coolingCharts'
	import RankingList from '@/components/common/rankingList'

	export default {
		name: 'aggregateCooling',
		components: {
			ChartPie,
			ChartBar,
			ChartLine,
			RankingList
		},
		data: function () {
			return {
        summaryType: '5',
				buttonSize: 'large',
				CarbonType: '0',
				DateInit: [],
        spaceSelect: [],
				selectDate: [], // 日期三级联动的时间（格式为数组）
				isActiveDate: '', // 当前选择的时间（格式为字符串）
				SummaryList: Array,
				BasicData: [],
				sameCompareTableConfig: {
					sameCompare: {
						time: this.isActiveDate,
						page: 1,
						size: 5,
						sortByColumn: '',
						type: '0',
						workSpace: ''
					},
					// 同类对比表格表头配置
					sameCompareColumns: [
						{
							title: '排名',
							type: 'index'
						},
						{
							title: '企业',
							key: 'name',
							className: 'table-info-column'
						},
						{
							title: '总量(kg)',
							key: 'useNum'
						},
						{
							title: '年涨幅',
							key: 'increase',
							sortable: 'custom',
							render: (h, params) => {
								return h('div', [
									h('strong', params.row.increase),
									h('Icon', {
										props: {
											type: params.row.increase.indexOf('-') != 0 ? 'ios-arrow-round-up' : 'ios-arrow-round-down',
											color: params.row.increase.indexOf('-') != 0 ? '#86d270' : 'red',
											size: '24'
										}
									})
								])
							}
						}
					],
					sameCompareData: [],
					sameCompareRow: 5
				},
				// 类型占比/排名
				typePercent: [],
				// xxx汇总冷量-- 过往对比/过往排名
				barObj: {},
				chartLineData: {},
				cardActive: '总冷量',
				Clickable: '总冷量单车冷量',
				ensTreeData: [],
				workSpaceString: '电-HD1-HD1总电表（测试）'
			}
		},
		created: function () {
			let self = this
			self.yearCalculation(2015, 15)
			self.selectDate.push(new Date().format('yyyy')) // 时间初始化
			self.isActiveDate = self.selectDate.join('-')
			self.sameCompareTableConfig.sameCompare.time = self.isActiveDate
			self.sameCompareTableConfig.sameCompare.type = self.CarbonType
			self.ensTree()
			self.post_carbon_allCarBon(self.isActiveDate, self.workSpaceString)
			self.post_carbon_carbonTrend(self.isActiveDate, self.CarbonType, self.workSpaceString)
			self.post_carbon_carbonTrendSon(self.isActiveDate, self.CarbonType, self.workSpaceString)
			self.post_carbon_sameCompare()
			self.post_carbon_typePercent(self.isActiveDate, self.CarbonType, self.workSpaceString)
			self.post_carbon_lastCompare(self.isActiveDate, self.CarbonType, self.workSpaceString)
		},
		methods: {
			// 年份计算
			yearCalculation: function (initYear, number) {
				let self = this
				for (let i = 0; i <= number; i++) {
					let obj = {}
					obj.value = initYear + i
					obj.value = obj.value.toString()
					obj.label = initYear + i + '年'
					obj.children = []
					obj.loading = false
					self.DateInit.push(obj)
				}
			},
			// 年份获取月份和天
			ttrees: function (item, callback) {
                item.loading = true
				window.myapi.ttrees({year: '2019'}).then((res) => {
					if (res.data.status === 200) {
						item.children = res.data.data[0].children
						item.loading = false
						callback()
					}
				}).catch(function (e) {
					// console.log(e)
				})
			},
			// 车间选择  树形数据
			ensTree: function () {
				let self = this
				window.myapi.ensTree({type: '成本', factory: 'ZZ'}).then(function (res) {
					if (res.data.status === 200) {
						self.ensTreeData = res.data.data
            self.spaceSelect.push(res.data.data[0].value)
						// self.carbon_allin_list = res.data.data
					} else {

					}
				}).catch(function (e) {
					// console.log(e)
				})
			},
			// 车间改变
			changeWorkSpace: function (workSpace, selectedData) {
				let self = this
				let str = ''
				for (let i = 0; i < selectedData.length; i++) {
					if (!i) {
						str = selectedData[i].label
					} else {
						str = str + '-' + selectedData[i].label
					}
				}
				self.workSpaceString = str
				self.post_carbon_allCarBon(self.isActiveDate, self.workSpaceString)
				self.post_carbon_carbonTrend(self.isActiveDate, self.CarbonType, self.workSpaceString)
				self.post_carbon_carbonTrendSon(self.isActiveDate, self.CarbonType, self.workSpaceString)
				self.post_carbon_sameCompare()
				self.post_carbon_typePercent(self.isActiveDate, self.CarbonType, self.workSpaceString)
				self.post_carbon_lastCompare(self.isActiveDate, self.CarbonType, self.workSpaceString)
			},
			// 冷量类型改变
			CoolingTypeClick: function (type) {
				let self = this
				if (self.Clickable.indexOf(type) != -1) {
					self.cardActive = type
					self.CarbonType = type === '总冷量' ? '0' : '1'
							self.post_carbon_allCarBon(self.isActiveDate, self.workSpaceString)
							self.post_carbon_carbonTrend(self.isActiveDate, self.CarbonType, self.workSpaceString)
							self.post_carbon_carbonTrendSon(self.isActiveDate, self.CarbonType, self.workSpaceString)
							self.post_carbon_sameCompare()
							self.post_carbon_typePercent(self.isActiveDate, self.CarbonType, self.workSpaceString)
							self.post_carbon_lastCompare(self.isActiveDate, self.CarbonType, self.workSpaceString)
				}
			},
			// xxx汇总碳排--总碳排,单车碳排,总产量,平均温度
			post_carbon_allCarBon: function (time, workSpace, summaryType) {
				let self = this
        window.myapi.carbons_allCarBon({time: time, workSpace: workSpace, summaryType: this.summaryType}).then(function (res) {
					if (res.data.status === 200) {
						self.SummaryList = res.data.data
					} else {

					}
				}).catch(function (e) {
					// console.log(e)
				})
			},
			// xxx汇总碳排-- 碳排走势
			post_carbon_carbonTrend: function (time, type, workSpace) {
				let self = this
				window.myapi.carbon_carbonTrend({time: time, type: type, workSpace: workSpace}).then(function (res) {
					if (res.data.status === 200) {
						let x = {
							xAxisData: res.data.data.xData,
							yieldData: res.data.data.yLeft,
							carbonData: res.data.data.yRight
						}
						self.chartLineData = x
					} else {

					}
				}).catch(function (e) {
					// console.log(e)
				})
			},
			// xxx汇总碳排-- 子级占比排名
			post_carbon_carbonTrendSon: function (time, type, workSpace) {
				let self = this
				window.myapi.carbon_carbonTrendSon({time: time, type: type, workSpace: workSpace}).then(function (res) {
					if (res.data.status === 200) {
						self.BasicData = res.data.data
					} else {

					}
				}).catch(function (e) {
					// console.log(e)
				})
			},
			// xxx汇总碳排-- 同类对比
      post_carbon_sameCompare: function () {
        let self = this
        self.sameCompareTableConfig.sameCompare.time = self.isActiveDate
        self.sameCompareTableConfig.sameCompare.type = self.CarbonType
        self.sameCompareTableConfig.sameCompare.workSpace = self.workSpaceString
        window.myapi.carbon_sameCompare(this.sameCompareTableConfig.sameCompare).then(function (res) {
          if (res.data.status === 200) {
            self.sameCompareTableConfig.sameCompareData = res.data.data.content
            self.sameCompareTableConfig.totals = res.data.data.totalElements
          } else {

          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
			// xxx汇总碳排-- 类型占比/排名
			post_carbon_typePercent: function (time, type, workSpace, summaryType) {
				let self = this
				window.myapi.carbon_typePercent({time: time, type: type, workSpace: workSpace, summaryType: this.summaryType}).then(function (res) {
					if (res.data.status === 200) {
						self.typePercent = res.data.data.datas
					} else {

					}
				}).catch(function (e) {
					// console.log(e)
				})
			},
			// xxx汇总碳排-- 过往对比/过往排名
			post_carbon_lastCompare: function (time, type, workSpace) {
				let self = this
				window.myapi.carbon_lastCompare({time: time, type: type, workSpace: workSpace}).then(function (res) {
					if (res.data.status === 200) {
						// console.log(res.data)
						self.barObj = res.data.data
					} else {

					}
				}).catch(function (e) {
					// console.log(e)
				})
			},
			// 表格重新排序
			onSortChange: function (e) {
				let self = this
				self.sameCompareTableConfig.sameCompare.sortByColumn = e
				self.post_carbon_sameCompare()
			},
			// 分页处理函数---切换每页条数时的回调，返回切换后的每页条数
			pageSizeChange: function (e) {
				let self = this
				self.sameCompareTableConfig.sameCompare.size = e
				self.post_carbon_sameCompare()
			},
			// 分页处理函数---页码改变的回调，返回改变后的页码
			changePage: function (e) {
				let self = this
				self.sameCompareTableConfig.sameCompare.page = e
				self.post_carbon_sameCompare()
			},
			// 时间改变-----具体时间/今日/本月/今年
			changeDate: function (Datetime) {
				let self = this
				if (typeof (Datetime) === 'string') {
					self.isActiveDate = Datetime
					self.selectDate = Datetime.split('-')
				} else {
					self.isActiveDate = Datetime.join('-')
				}
				self.post_carbon_allCarBon(self.isActiveDate, self.workSpaceString)
				self.post_carbon_carbonTrend(self.isActiveDate, self.CarbonType, self.workSpaceString)
				self.post_carbon_carbonTrendSon(self.isActiveDate, self.CarbonType, self.workSpaceString)
				self.post_carbon_sameCompare()
				self.post_carbon_typePercent(self.isActiveDate, self.CarbonType, self.workSpaceString)
				self.post_carbon_lastCompare(self.isActiveDate, self.CarbonType, self.workSpaceString)
			},
			// 选择后展示的函数，用于自定义显示格式
			format (labels, selectedData) {
				let str = ''
				for (let i = 0; i < selectedData.length; i++) {
					if (!i) {
						str = selectedData[i].value
					} else {
						str = str + ' - ' + selectedData[i].value
					}
				}
                return str
			}
		}
	}
</script>

<style scoped>
.TopIndex_block{
	margin-left: -10px;
	margin-right: -10px;
	color: #777;
}
.TopIndex_block .TopIndex_block_item{
	padding-left: 10px;
	padding-right: 10px;
}

.TopIndex_block .TopIndex_block_item .Clickable{
	cursor: pointer;
}

.TopIndex_block .TopIndex_block_item .active{
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
	border-color: #eee;
	background-color: #f3f3f3;
}

.TopIndex_block .TopIndex_block_item h1{
	font-weight: 400;
	padding: 15px 15%;
	color: #000;
}
.TopIndex_block .TopIndex_block_item h1 span{
	font-weight: 200;
	font-size: 16px;
	color: rgba(150, 150, 150, 0.847058823529412);
	margin-left: 10%;
}
.TopIndex_block .TopIndex_block_item img{
	width: 100%;
	height: 40px;
	display: block;
}
.TopIndex_block .TopIndex_block_item .TopIndex_block_item_row{
	text-align: center;
	line-height: 40px;
}

.ivu-table-wrapper{
	border: none;
}

/deep/ .ivu-table::after{
	width: 0px !important;
}
.ivu-table td{
	width: 0px!important;
}
.ivu-table td.table-info-column{
	color: #2d8cef;
}
.sameCompare_table{
	text-align: center;
	margin-top: 15px;
}

/deep/ .ivu-table th, /deep/ .ivu-table td{
	text-align: center;
}

/*滚动条样式*/
/deep/ .ivu-table-overflowY::-webkit-scrollbar {
	width: 6px;
	height: 1px;
}

/deep/ .ivu-table-overflowY::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
	border-radius: 6px;
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
	background: #888;
}
/deep/ .ivu-table-overflowY::-webkit-scrollbar-track {/*滚动条里面轨道*/
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
	border-radius: 6px;
	background: #EDEDED;
}

</style>
